<template>
  <div class="container-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">装箱管理</h2>
        <el-button type="primary" class="add-button" @click="OpenAdd">
          <el-icon><Plus /></el-icon>新增装箱
        </el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-card">
      <el-form :inline="true" class="search-form">
        <el-form-item label="装箱编号">
          <el-input v-model="searchForm.packagingCode" placeholder="请输入装箱编号" clearable>
            <template #prefix>
              <el-icon><Document /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="销售订单">
          <el-input v-model="searchForm.salesCode" placeholder="请输入销售订单编号" clearable>
            <template #prefix>
              <el-icon><Tickets /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="searchForm.clientName" placeholder="请输入客户名称" clearable>
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="检查员">
          <el-input v-model="searchForm.inspectorName" placeholder="请输入检查员名称" clearable>
            <template #prefix>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-card">
      <el-table 
        v-loading="loading"
        :data="tableData" 
        border 
        stripe
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          height: '50px',
          fontWeight: '600'
        }"
      >
        <el-table-column prop="packagingCode" label="装箱编号" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span class="code-text">{{ scope.row.packagingCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packagingDate" label="装箱日期" min-width="120">
          <template #default="scope">
            <el-tag size="small" type="info" effect="plain">
              {{ scope.row.packagingDate }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="salesCode" label="销售订单编号" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span class="code-text">{{ scope.row.salesCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="clientName" label="客户信息" min-width="200">
          <template #default="scope">
            <div class="client-info">
              <span class="client-name">{{ scope.row.clientName }}</span>
              <el-tag size="small" type="info">{{ scope.row.clientCode }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="箱体尺寸" min-width="200">
          <template #default="scope">
            <div class="box-dimensions">
              <el-tag size="small" type="success">长: {{ scope.row.boxLength }}mm</el-tag>
              <el-tag size="small" type="warning">宽: {{ scope.row.boxWidth }}mm</el-tag>
              <el-tag size="small" type="danger">高: {{ scope.row.boxHeight }}mm</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="重量信息" min-width="180">
          <template #default="scope">
            <div class="weight-info">
              <el-tag size="small" type="success">净重: {{ scope.row.netweight }}kg</el-tag>
              <el-tag size="small" type="warning">毛重: {{ scope.row.grossWeight }}kg</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="inspectorName" label="检查员" min-width="120">
          <template #default="scope">
            <el-tag size="small" effect="plain" type="info">
              <el-icon><User /></el-icon>
              {{ scope.row.inspectorName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="descs" label="备注" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <el-tooltip 
              v-if="scope.row.descs"
              :content="scope.row.descs"
              placement="top"
              effect="light"
            >
              <span class="remarks-text">{{ scope.row.descs }}</span>
            </el-tooltip>
            <span v-else class="no-remarks">暂无备注</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <div class="operation-buttons">
              <el-button type="primary" link @click="handleEdit(scope.row)">
                <el-icon><Edit /></el-icon>编辑
              </el-button>
              <el-divider direction="vertical" />
              <el-button type="danger" link @click="handleDelete(scope.row)">
                <el-icon><Delete /></el-icon>删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page.pageIndex"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
        />
      </div>
    </div>

    <!-- 新增/编辑装箱弹窗 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="form.id ? '编辑装箱信息' : '新增装箱信息'"
      width="1000px"
      :close-on-click-modal="false"
      destroy-on-close
      class="custom-dialog"
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="custom-header">
          <div :id="titleId" :class="titleClass" class="dialog-title">
            <el-icon class="header-icon"><Box /></el-icon>
            {{ form.id ? '编辑装箱信息' : '新增装箱信息' }}
          </div>
          <el-button class="close-btn" @click="close">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>

      <el-form 
        ref="formRef"
        :model="form" 
        :rules="rules"
        label-width="120px"
        class="custom-form"
        :validate-on-rule-change="false"
      >
        <div class="form-section">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            基本信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="装箱编号" prop="packagingCode">
                <div class="code-input-group">
                  <el-input 
                    v-model="form.packagingCode" 
                    placeholder="请输入装箱编号"
                    :maxlength="20"
                    show-word-limit
                    :disabled="autoGenerate"
                  >
                    <template #prefix>
                      <el-icon><Document /></el-icon>
                    </template>
                  </el-input>
                  <div class="auto-generate">
                    <el-switch
                      v-model="autoGenerate"
                      :disabled="form.id !== 0"
                      active-text="自动生成"
                      class="auto-switch"
                      style="width: 200px;"
                      @change="handleAutoGenerateChange"
                    />
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="装箱日期" prop="packagingDate">
                <el-date-picker
                  v-model="form.packagingDate"
                  type="date"
                  placeholder="选择装箱日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="销售订单编号" prop="salesCode">
                <el-input 
                  v-model="form.salesCode" 
                  placeholder="请输入销售订单编号"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Tickets /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发票编号" prop="invoiceCode">
                <el-input 
                  v-model="form.invoiceCode" 
                  placeholder="请输入发票编号"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Document /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">
            <el-icon><User /></el-icon>
            客户信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="客户编号" prop="clientCode">
                <el-input 
                  v-model="form.clientCode" 
                  placeholder="请输入客户编号"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="clientName">
                <el-input 
                  v-model="form.clientName" 
                  placeholder="请输入客户名称"
                  :maxlength="50"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">
            <el-icon><Box /></el-icon>
            箱体信息
          </div>
          <div class="box-info-container">
            <div class="dimensions-row">
              <div class="dimension-item">
                <div class="dimension-label">
                  <el-icon><ArrowRight /></el-icon>
                  箱长
                </div>
                <el-form-item prop="boxLength">
                  <el-input-number 
                    v-model="form.boxLength" 
                    :min="0"
                    :precision="2"
                    :step="100"
                    :controls="true"
                    placeholder="请输入箱长"
                    class="dimension-input"
                  >
                    <template #suffix>mm</template>
                  </el-input-number>
                </el-form-item>
              </div>
              <div class="dimension-item">
                <div class="dimension-label">
                  <el-icon><ArrowRight /></el-icon>
                  箱宽
                </div>
                <el-form-item prop="boxWidth">
                  <el-input-number 
                    v-model="form.boxWidth" 
                    :min="0"
                    :precision="2"
                    :step="100"
                    :controls="true"
                    placeholder="请输入箱宽"
                    class="dimension-input"
                  >
                    <template #suffix>mm</template>
                  </el-input-number>
                </el-form-item>
              </div>
              <div class="dimension-item">
                <div class="dimension-label">
                  <el-icon><ArrowRight /></el-icon>
                  箱高
                </div>
                <el-form-item prop="boxHeight">
                  <el-input-number 
                    v-model="form.boxHeight" 
                    :min="0"
                    :precision="2"
                    :step="100"
                    :controls="true"
                    placeholder="请输入箱高"
                    class="dimension-input"
                  >
                    <template #suffix>mm</template>
                  </el-input-number>
                </el-form-item>
              </div>
            </div>
            <div class="weight-row">
              <div class="weight-item">
                <el-form-item label="净重" prop="netweight" class="weight-form-item">
                  <el-input-number 
                    v-model="form.netweight" 
                    :min="0"
                    :precision="2"
                    :step="10"
                    class="weight-input"
                    placeholder="请输入净重"
                  >
                    <template #suffix>kg</template>
                  </el-input-number>
                </el-form-item>
              </div>
              <div class="weight-item">
                <el-form-item label="毛重" prop="grossWeight" class="weight-form-item">
                  <el-input-number 
                    v-model="form.grossWeight" 
                    :min="0"
                    :precision="2"
                    :step="10"
                    class="weight-input"
                    placeholder="请输入毛重"
                  >
                    <template #suffix>kg</template>
                  </el-input-number>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-title">
            <el-icon><InfoFilled /></el-icon>
            其他信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="检查员" prop="inspectorName">
                <el-input 
                  v-model="form.inspectorName" 
                  placeholder="请输入检查员名称"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="descs">
            <el-input 
              type="textarea" 
              v-model="form.descs" 
              :rows="3"
              placeholder="请输入备注信息"
              :maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button plain @click="dialogVisible = false">
            <el-icon><Close /></el-icon>取消
          </el-button>
          <el-button type="primary" @click="funAdd" :loading="saveLoading">
            <el-icon><Check /></el-icon>{{ form.id ? '保存修改' : '确认新增' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, 
  Refresh, 
  Plus, 
  Edit, 
  Delete, 
  Document, 
  Tickets, 
  User, 
  Box, 
  InfoFilled, 
  Avatar,
  Close,
  Check,
  ArrowRight,
} from '@element-plus/icons-vue'
import http from '@/api/http'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const formRef = ref()

// 加载状态
const loading = ref(false)
const saveLoading = ref(false)

// 查询条件
const searchForm = reactive({
  clientName: '',
  packagingCode: '',
  salesCode: '',
  inspectorName: '',
})

// 分页条件
const page = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})

// 表单数据
const form = reactive({
  id: 0,
  packagingCode: '',
  packagingDate: '',
  salesCode: '',
  clientCode: '',
  clientName: '',
  invoiceCode: '',
  boxLength: '',
  boxWidth: '',
  boxHeight: '',
  netweight: '',
  grossWeight: '',
  inspectorName: '',
  descs: '',
})

// 表格数据
const tableData = ref([])

// 对话框显示状态
const dialogVisible = ref(false)

// 自动生成开关状态
const autoGenerate = ref(false)

// 获取数据列表
const funShow = async () => {
  try {
    loading.value = true
    const res = await axios.get('http://localhost:9991/api/WarehouseManagement/GetContainerPageList', {
      params: {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        clientName: searchForm.clientName,
        packagingCode: searchForm.packagingCode,
        salesCode: searchForm.salesCode,
        inspectorName: searchForm.inspectorName
      }
    })
    tableData.value = res.data.data
    page.totalCount = res.data.totalCount
    page.totalPage = res.data.totalPages
  } catch (error: any) {
    ElMessage.error('获取数据失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 重置搜索
const resetSearch = () => {
  searchForm.clientName = ''
  searchForm.packagingCode = ''
  searchForm.salesCode = ''
  searchForm.inspectorName = ''
  page.pageIndex = 1
  funShow()
}

// 搜索
const handleSearch = () => {
  page.pageIndex = 1
  funShow()
}

// 处理自动生成开关变化
const handleAutoGenerateChange = (val: boolean) => {
  if (val) {
    // 自动生成仓库编号
    const timestamp = new Date().getTime()
    const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
    form.packagingCode = `WH${timestamp.toString().slice(-6)}${random}`
  } else {
    form.packagingCode = ''
  }
}

// 修改打开新增对话框方法
const OpenAdd = () => {
  form.id = 0
  form.packagingCode = ''
  form.packagingDate = ''
  form.salesCode = ''
  form.clientCode = ''
  form.clientName = ''
  form.invoiceCode = ''
  form.boxLength = ''
  form.boxWidth = ''
  form.boxHeight = ''
  form.netweight = ''
  form.grossWeight = ''
  form.inspectorName = ''
  form.descs = ''
  autoGenerate.value = false
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
  Object.assign(form, row)
  dialogVisible.value = true
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该装箱记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      loading.value = true
      await http.post('/api/WarehouseManagement/DeleteContainer', row)
      ElMessage.success('删除成功')
      funShow()
    } catch (error: any) {
      ElMessage.error('删除失败：' + error.message)
    } finally {
      loading.value = false
    }
  })
}

//表单校验规则
const rules = {
  packagingCode: [
    { required: true, message: '请输入装箱编号', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  packagingDate: [
    { required: true, message: '请选择装箱日期', trigger: 'change' }
  ],
  salesCode: [
    { required: true, message: '请输入销售订单编号', trigger: 'blur' }
  ],
  clientCode: [
    { required: true, message: '请输入客户编号', trigger: 'blur' }
  ],
  clientName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' }
  ],
  boxLength: [
    { required: true, message: '请输入箱长', trigger: 'blur' }
  ],
  boxWidth: [
    { required: true, message: '请输入箱宽', trigger: 'blur' }
  ],
  boxHeight: [
    { required: true, message: '请输入箱高', trigger: 'blur' }
  ],
  netweight: [
    { required: true, message: '请输入净重', trigger: 'blur' }
  ],
  grossWeight: [
    { required: true, message: '请输入毛重', trigger: 'blur' }
  ],
  inspectorName: [
    { required: true, message: '请输入检查员名称', trigger: 'blur' }
  ]
}

//新增/编辑方法
const funAdd = async () => {
  try {
    await formRef.value.validate()
    saveLoading.value = true
    const api = form.id ? '/api/WarehouseManagement/UpdateContainer' : '/api/WarehouseManagement/CreateContainer'
    await http.post(api, form)
    ElMessage.success(form.id ? '编辑成功' : '新增成功')
    dialogVisible.value = false
    funShow()
  } catch (error: any) {
    ElMessage.error((form.id ? '编辑' : '新增') + '失败：' + error.message)
  } finally {
    saveLoading.value = false
  }
}

// 初始化
onMounted(() => {
  funShow()
})
</script>

<style lang="scss" scoped>
.container-view {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;

        &::before {
          content: '';
          width: 4px;
          height: 20px;
          background: linear-gradient(to bottom, #409eff, #67c23a);
          border-radius: 2px;
        }
      }

      .add-button {
        padding: 8px 16px;
        font-weight: 500;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3);
        }

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .search-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .el-form-item {
        margin-bottom: 0;
        margin-right: 0;
        flex: 1;
        min-width: 280px;

        &.search-buttons {
          min-width: auto;
          display: flex;
          justify-content: flex-end;
          gap: 8px;

          .el-button {
            padding: 8px 20px;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-2px);
            }

            .el-icon {
              margin-right: 4px;
            }
          }
        }

        :deep(.el-form-item__label) {
          font-weight: 500;
        }

        :deep(.el-input__wrapper) {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        :deep(.el-input__prefix) {
          margin-right: 8px;
          .el-icon {
            color: #909399;
          }
        }
      }
    }
  }

  .table-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }

    :deep(.el-table) {
      border-radius: 4px;
      overflow: hidden;

      .el-table__header {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 600;
          height: 50px;
          transition: background-color 0.3s;

          &:hover {
            background-color: #ebeef5;
          }
        }
      }

      .el-table__row {
        td {
          padding: 12px;
          transition: all 0.3s;
        }

        &:hover {
          td {
            background-color: #f5f7fa;
          }
        }
      }
    }

    .code-text {
      font-family: Monaco, Menlo, Consolas, monospace;
      color: #409eff;
      font-weight: 500;
      transition: color 0.3s;

      &:hover {
        color: #66b1ff;
      }
    }

    .client-info {
      display: flex;
      align-items: center;
      gap: 8px;

      .client-name {
        font-weight: 500;
        color: #303133;
      }

      .el-tag {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    .box-dimensions,
    .weight-info {
      display: flex;
      gap: 8px;

      .el-tag {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    .remarks-text {
      color: #606266;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #409eff;
      }
    }

    .no-remarks {
      color: #909399;
      font-style: italic;
    }

    .operation-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;

      .el-button {
        padding: 4px 8px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }

        .el-icon {
          margin-right: 4px;
        }
      }

      .el-divider {
        margin: 0;
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    :deep(.el-pagination) {
      .el-pagination__total {
        margin-right: 16px;
      }

      .el-pagination__sizes {
        margin-right: 16px;
      }

      button {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }

      .el-pager li {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }

        &.is-active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}

.custom-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    .custom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      padding: 20px 24px;
      border-bottom: 1px solid #ebeef5;
      background: linear-gradient(to right, #409eff, #67c23a);

      .dialog-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;

        .header-icon {
          font-size: 20px;
        }
      }

      .close-btn {
        padding: 8px;
        background: transparent;
        border: none;
        color: #ffffff;
        transition: all 0.3s;

        &:hover {
          transform: rotate(90deg);
          color: #ffffff;
        }

        .el-icon {
          font-size: 18px;
        }
      }
    }

    .el-dialog__body {
      padding: 24px;
      max-height: calc(90vh - 180px);
      overflow-y: auto;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: #dcdfe6;
        border-radius: 3px;
        
        &:hover {
          background-color: #c0c4cc;
        }
      }
    }

    .el-dialog__footer {
      padding: 16px 24px;
      border-top: 1px solid #ebeef5;
      background-color: #f5f7fa;
    }
  }

  .custom-form {
    .form-section {
      margin-bottom: 24px;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 12px;
      transition: all 0.3s ease;
      border: 1px solid #ebeef5;

      &:hover {
        background-color: #f0f2f5;
        transform: translateY(-2px);
        border-color: #dcdfe6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: linear-gradient(to bottom, #409eff, #67c23a);
          border-radius: 2px;
        }

        .el-icon {
          font-size: 18px;
          color: #409eff;
        }
      }

      .box-info-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;

        .dimensions-row {
          display: flex;
          gap: 16px;
          margin-bottom: 20px;

          .dimension-item {
            flex: 1;
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .dimension-label {
              display: flex;
              align-items: center;
              gap: 6px;
              margin-bottom: 12px;
              color: #606266;
              font-weight: 500;
              font-size: 14px;

              .el-icon {
                color: #409eff;
                font-size: 16px;
              }
            }
          }
        }

        .weight-row {
          display: flex;
          gap: 16px;

          .weight-item {
            flex: 1;
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .weight-form-item {
              margin-bottom: 0;

              :deep(.el-form-item__label) {
                color: #606266;
                font-weight: 500;
                font-size: 14px;
              }
            }

            .weight-input {
              width: 100%;

              .el-input-number__wrapper {
                box-shadow: 0 0 0 1px #dcdfe6 inset;
                transition: all 0.3s;
                border-radius: 6px;
                height: 32px;
                padding: 0;
                display: flex;
                align-items: center;

                &:hover {
                  box-shadow: 0 0 0 1px #409eff inset;
                }

                .el-input__wrapper {
                  padding: 0;
                  box-shadow: none !important;
                }

                input {
                  text-align: center;
                  font-family: Monaco, Menlo, Consolas, monospace;
                  color: #303133;
                  font-size: 14px;
                  padding: 0 4px !important;
                }

                .el-input__suffix {
                  color: #909399;
                  font-size: 13px;
                  padding-right: 8px;
                  margin-left: 2px;
                }
              }
            }
          }
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;
        
        &:last-child {
          margin-bottom: 0;
        }

        .el-form-item__label {
          font-weight: 500;
          color: #606266;
          min-width: 140px;
        }

        .el-input__wrapper,
        .el-textarea__wrapper {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;
          border-radius: 6px;
          min-width: 300px;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        .el-textarea__wrapper {
          min-height: 120px;
        }

        .el-input-number__wrapper {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;
          border-radius: 6px;
          min-width: 120px;
          width: 120px;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          .el-input-number__decrease,
          .el-input-number__increase {
            background-color: #f5f7fa;
            border-color: #dcdfe6;
            
            &:hover {
              color: #409eff;
            }
          }

          .el-input__wrapper {
            padding-right: 5px;
          }

          .el-input__suffix {
            color: #909399;
            font-size: 12px;
            margin-left: 2px;
          }
        }

        .el-date-editor {
          width: 100%;
          border-radius: 6px;
          min-width: 300px;
        }
      }

      .el-row {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .el-col {
          padding: 0 12px;
        }
      }
    }
  }

  .dialog-footer {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .el-button {
      padding: 10px 24px;
      font-weight: 500;
      transition: all 0.3s;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 4px;

      .el-icon {
        font-size: 16px;
      }

      &:hover {
        transform: translateY(-2px);
      }

      &.el-button--primary {
        background: linear-gradient(to right, #409eff, #67c23a);
        border: none;

        &:hover {
          background: linear-gradient(to right, #66b1ff, #85ce61);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
}

.code-input-group {
  display: flex;
  align-items: center;
  gap: 12px;

  .el-input {
    flex: 1;
    min-width: 300px;
  }

  .auto-generate {
    min-width: 140px;
    display: flex;
    align-items: center;

    .auto-switch {
      :deep(.el-switch__core) {
        border-radius: 12px;
        
        .el-switch__action {
          border-radius: 10px;
        }
      }

      :deep(.el-switch__label) {
        color: #606266;
        font-size: 13px;

        &.is-active {
          color: #409eff;
          font-weight: 500;
        }
      }
    }
  }
}

.box-info-container {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;

  .dimensions-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;

    .dimension-item {
      flex: 1;
      background: white;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .dimension-label {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
        color: #606266;
        font-weight: 500;
        font-size: 14px;

        .el-icon {
          color: #409eff;
          font-size: 16px;
        }
      }
    }
  }

  .weight-row {
    display: flex;
    gap: 16px;

    .weight-item {
      flex: 1;
      background: white;
      padding: 16px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .weight-form-item {
        margin-bottom: 0;

        :deep(.el-form-item__label) {
          color: #606266;
          font-weight: 500;
          font-size: 14px;
        }
      }

      .weight-input {
        width: 100%;

        .el-input-number__wrapper {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;
          border-radius: 6px;
          height: 32px;
          padding: 0;
          display: flex;
          align-items: center;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          .el-input__wrapper {
            padding: 0;
            box-shadow: none !important;
          }

          input {
            text-align: center;
            font-family: Monaco, Menlo, Consolas, monospace;
            color: #303133;
            font-size: 14px;
            padding: 0 4px !important;
          }

          .el-input__suffix {
            color: #909399;
            font-size: 13px;
            padding-right: 8px;
            margin-left: 2px;
          }
        }
      }
    }
  }
}

.dimension-input {
  width: 160px;

  .el-input-number__wrapper {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    transition: all 0.3s;
    border-radius: 6px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;

    &:hover {
      box-shadow: 0 0 0 1px #409eff inset;
    }

    .el-input-number__decrease {
      position: static;
      order: 1;
      width: 28px;
      height: 100%;
      background-color: #f5f7fa;
      border-color: #dcdfe6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px 0 0 6px;
      
      &:hover {
        color: #409eff;
        background-color: #ecf5ff;
      }
    }

    .el-input__wrapper {
      padding: 0;
      box-shadow: none !important;
      flex: 1;
      min-width: 0;
      order: 2;
    }

    .el-input-number__increase {
      position: static;
      order: 3;
      width: 28px;
      height: 100%;
      background-color: #f5f7fa;
      border-color: #dcdfe6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 6px 6px 0;
      
      &:hover {
        color: #409eff;
        background-color: #ecf5ff;
      }
    }

    input {
      text-align: center;
      font-family: Monaco, Menlo, Consolas, monospace;
      color: #303133;
      font-size: 14px;
      padding: 0 4px !important;
      width: 100% !important;
      min-width: 0;

      &::placeholder {
        color: #c0c4cc;
      }
    }

    .el-input__suffix {
      color: #909399;
      font-size: 13px;
      padding-right: 8px;
      margin-left: 2px;
    }
  }
}
</style>
